<template>
  <div>
    <el-table
      :data="secondTableData"
      :default-sort="{ prop: 'different', order: 'descending' }"
      size="small"
      height="360"
      :row-style="{ 'background-color': 'transparent' }"
      :cell-style="{ background: 'transparent' }"
      :header-cell-style="{
        'background-color': '#283979',
        border: 'none',
        'line-height': '28px',
        'text-align': 'center',
      }"
      style="width: 100%"
    >
      <el-table-column
        prop="area"
        align="center"
        :show-overflow-tooltip="true"
        label="区域名称"
      >
      </el-table-column>
      <el-table-column
        prop="installPosition"
        align="center"
        :show-overflow-tooltip="true"
        label="安装位置"
      >
      </el-table-column>
      <el-table-column
        prop="avgDiffVoltage"
        align="center"
        sortable
        label="平均压差"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="maxDiffVoltage"
        align="center"
        sortable
        label="最大压差"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="avgPower"
        align="center"
        sortable
        label="平均功率"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="maxPower"
        align="center"
        sortable
        label="最高功率"
        width="120"
      >
      </el-table-column>
    </el-table>
    <div style="display: inline-block; float: right; margin-right: 10px">
      <el-pagination
        :page-size="6"
        layout="total, prev, pager, next"
        :total="secondTableDatalength"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
export default {
  data() {
    return {
      secondTableDatalength:-1,
      secondTableData: [
        {
          addres: "保安亭",
          position: "丰泽新秀社区1#口",

          avgPressure: "9",
          maxPressure: "16",
          avgPower: "98",
          maxPower: "168",
        },
        {
          addres: "支行大厅",
          position: "泉秀支行灯荣路11号",

          avgPressure: "5",
          maxPressure: "10",
          avgPower: "11",
          maxPower: "36",
        },
        {
          addres: "5楼皮草专柜",
          position: "大洋百货5层",

          avgPressure: "23",
          maxPressure: "37",
          avgPower: "2400",
          maxPower: "4200",
        },
        {
          addres: "鞋服专批",
          position: "辛福街辛福大厦1楼",

          avgPressure: "7",
          maxPressure: "9",
          avgPower: "800",
          maxPower: "1888",
        },
        {
          addres: "售票大厅",
          position: "大厅总控开关",

          avgPressure: "11",
          maxPressure: "15",
          avgPower: "23001",
          maxPower: "55421",
        },
      ],
    };
  },
  props: {
    querytime: {
      type: String,
    },
    queryregion: {
      type: [Number, String],
    },
  },
  mounted() {
    this.getOrganLineDanger();
  },
  methods: {
    getOrganLineDanger() {
      ajax.get({
        url:
          this.$API.getOrganLineDanger +
          "?branchId="+this.queryregion+"&date=" +
          this.querytime.slice(0, 10),
        data: { branchId: 0, date: this.querytime },
        success: (response) => {
          let self = this;
          
          self.secondTableData = response.data;
       
          self.secondTableDatalength = response.data.length;
        },
      });
    },
  },
   watch: {
    querytime(newVal, oldVal) {
      // console.log(newVal.slice(0, 10));
     
      this.getOrganLineDanger();
    },
    queryregion(newVal, oldVal) {
      // console.log(newVal);
      // console.log(oldVal);
      this.getOrganLineDanger();
    },
  },
};
</script>
<style scoped>
.el-table::before {
  height: 0px;
}
.el-table,
.el-table__body-wrapper,
.el-table__body-wrapper {
  background: initial;
}
::v-deep .el-table th > .cell {
  padding: 0;
}
</style>